<!--
 * @Author: YMJ
 * @Date: 2020-10-30 10:27:42
-->
<template>
  <div class="dashboard-container">
    <div class="container">
      <!-- 实时数据 -->
      <div class="model">
        <div class="text">实时数据</div>
        <el-row :gutter="24" class="data">
          <el-col
            v-for="item in realTimeData"
            :key="item.label"
            :span="6"
          >
            <el-card shadow="hover">
              <div @click="toPath(item.router)">
                <el-row :gutter="20"  @click="toPath(item.router)">
                  <el-col :span="10"> <i :class="item.icon" class="icon" /></el-col>
                  <el-col :span="10"><span>{{ item.value }}<p>{{ totalData[item.label] }}</p></span></el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 热门话题、热门搜索 -->
      <el-row :gutter="20"> 
        <el-col :span="12" 
          v-for="item in hot"
          :key="item.id"
        >
          <div class="grid-content ">
            <div class="text">{{item.title}}</div>
            <div class="ul-li">
              <ul v-if="item.key == 'topic'">
                <li  
                 v-for="(item2 , index) in item.list"
                 :key="item2.index">
                  <span>{{index+1}}.{{item2.topicTitle}}</span>
                  <span>{{item2.readingQuantity +item2.discussQuantity}}</span>
                </li>
              </ul>
              <ul v-else> 
                <li 
                 v-for="(item2 , index) in item.list"
                 :key="item2.index"> 
                  <span>{{index+1}}.{{item2.word}}</span>
                  <span>{{item2.heat}}</span>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 待处理事务 -->
      <div class="model">
        <div class="text">待处理事务</div>
        <el-row :gutter="24" class="data">
          <el-col
            v-for="item in dealWithAffairs"
            :key="item.label"
            :span="8"
          >
            <div class="aff-border" @click="$router.push(item.router)">
              <span>{{ item.value }}</span>
              <span style="color:#D9001B">{{ totalData[item.label] }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 快捷入口 -->
      <div class="model">
        <div class="text">快捷入口</div>
        <div class="link data">
          <el-link
            v-for="item in fastPort"
            :key="item.label"
            class="link-item"
            :underline="false"
            @click="$router.push(item.href)"
          >
            <i :class="item.icon" class="icon" />
            <p>{{ item.value }}</p>
          </el-link>

        </div>
      </div>
      <!-- 会员总览 -->
      <div class="model">
        <el-row :gutter="24" class="data">
          <el-col :span="12">
            <div class="text">会员总览</div>
            <div class="link center">
              <el-col :span="6"><p>{{ totalData.memberTotal }}</p>会员总数</el-col>
              <el-col :span="6"><p>{{ totalData.memberAuth }}</p>实名认证</el-col>
              <el-col :span="6"><p>{{ totalData.dynamicTotal }}</p>会员动态</el-col>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">组织总览</div>
            <div class="link center">
              <el-col :span="8"><p>{{ totalData.orgTotal }}</p>组织总数</el-col>
              <el-col :span="8"><p>{{ totalData.orgAuth }}</p>组织认证</el-col>
              <el-col :span="8"><p>{{ totalData.goodsTotal }}</p>组织产品服务</el-col>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>

// 数据封装
import { useConfig } from './config/index'
// 公共方法
import { asyncApiFun } from '@/utils/utils'
// 接口
import { topicHot , searchHot } from '@/api/dashboard.js'
export default {
  data() {
    return {
      ...useConfig(),
      totalData: {}
    }
  },
  created(){
    this.getHotData()
  },
  mounted() {
    this.getTotalData(this.total1)
    this.getTotalData(this.total2)
    this.getTotalData(this.total3)
  },
  methods: {
    // 网络请求
    async getTotalData(_total) {
      for (let i = 0; i < _total.length; i++) {
        const item = _total[i]
        const [res] = await this.$async(item.api, item.data)
        if (res) {
          this.totalData = { ...this.totalData, [item.key]: res.data }
        }
      }
    },
    // 热门
    async getHotData(){
       const params = {
         current: 1,
         size: 10
       }
      //热门话题
       const [res] = await asyncApiFun( topicHot , params)
      // 热门搜索
       const [res2] = await asyncApiFun( searchHot , params)
       if (res){
          this.hot.forEach(item =>{
            if(item.key == 'topic'){
              item.list = res.data ?.list ?? []
            }
            else {
              item.list =  res2.data ?? []
            }
          })
       } 

    },
    toPath(path){
      if(path) this.$router.push(path)
      
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard-container{
    background-color: #FFFFFF;
}
.container{
    margin: 15px auto;
    width: 95%;
    background-color: #FFFFFF;
}
.model{
    height:250px;
    margin-bottom: 40px;
    border:1px solid rgba(233, 233, 233, 1);
}
.text{
    height: 50px;
    background-color: rgba(242, 242, 242, 1);
    border-bottom:1px solid rgba(233, 233, 233, 1) ;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
    font-weight:700;
    line-height:20px;
    font-size:14px;
    text-align: left;
    padding: 15px 15px;
}
.data{
   padding:40px 20px;
}
.icon{
    display: inline-block;
    font-size:60px;
    color:rgb(2, 167, 240);
}
.aff-border{
    width:70%;
    height:40px;
    display: flex;
    padding: 15px 30px 0 30px;
    cursor: pointer;
    border-bottom:1px solid rgba(233, 233, 233, 1);
    justify-content: space-between;
}
.aff-border span{
    font-size:13px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
}
.link{
    display: flex;
    font-size:16px;
    font-weight: 400;
}
.link-item{
    flex: 1;
}
.link-item p{
    font-size:14px;
    font-weight: 400;
    font-family: 微软雅黑, sans-serif;
    font-style: normal;
    color: rgb(153, 153, 153);
    text-align: center;
}
.center{
    text-align: center;
    font-size:16px;
    font-family:微软雅黑, sans-serif;
    font-weight: 400;
    border: 1px solid rgba(233, 233, 233, 1);
    font-style: normal;
    color: #999999;
    padding-top: 20px;
    padding-bottom: 60px;
}
.center p{
    color:#D9001B;
} 
.grid-content {
    border-radius: 4px;
    border: 1px solid #eee;
    background-color: #FFFFFF;
  }
.ul-li li{
  display: flex;
  list-style: none;
  height: 40px;
  line-height: 40px;
  justify-content:space-between;

}
.ul-li li span{
  padding-right:15px
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
